<template lang="html">
    <div class="upload-list-components">
        <input type="file" style="display: none;" @change="toUpload($event)" ref="uploadListInput" />
        <div class="show-upload" @click="uploadFile" v-if="imageSrcList.length < limit">
            <i class="iconfont icon-add i-font" ></i>
        </div>
        <div class="" v-for="(item,index) in imageSrcList" :key="index">
            <div class="image-show">
                <img :src="item.path" @click="previewImage($event)" alt="">
            </div>
            <slot name="imageDesc" :imageSrc="item" :index="index"></slot>
        </div>
    </div>
</template>

<script>
import ImagePreview from 'vant/lib/image-preview'
import EXIF from 'exif-js'
export default {
    props: {
        limit:{
            type: Number,
            default: 1
        },
        initImageList: {
            type: Array,
            default: () => []
        }
    },
    data(){
        return {
            imageSrcList: []
        }
    },
    methods: {
        uploadFile(){
            this.$refs.uploadListInput.click()
        },
        toUpload(e){

            EXIF.getData(e.target.files[0], function() {
                let allMetaData = EXIF.getAllTags(e.target.files[0])
                console.log(allMetaData.DateTime, allMetaData.GPSLatitude, allMetaData.GPSLongitude)
                if (allMetaData.DateTime) {
                    formData.append('makeTime', allMetaData.DateTime)
                }
                let units = [1,60,3600]
                if (allMetaData.GPSLatitude) {
                    let latitude = 0
                    allMetaData.GPSLatitude.forEach((item, index) => {
                        latitude += item / units[index]
                    })
                    formData.append('latitude', latitude)
                }
                if (allMetaData.GPSLongitude) {
                    let longitude = 0
                    allMetaData.GPSLongitude.forEach((item, index) => {
                        longitude += item / units[index]
                    })
                    formData.append('longitude', longitude)
                }
            })
            let formData = new FormData();
            formData.append('UploadForm[imageFile]', e.target.files[0])
            // let token = localStorage.getItem('token')
            // formData.append('token', token)
            this.$api.post('/other/add-image', formData, false).then(res => {
                res.path = process.env.BASE_URL + '/' + res.path
                this.imageSrcList.push(res)
                this.$emit('uploadOk', this.imageSrcList)
            }).catch(e => {
                console.log(e.message);
            })
        },
        previewImage(e){
            ImagePreview(this.imageSrcList);
        }
    },
    created(){
        this.imageSrcList = this.initImageList
    }
}
</script>

<style lang="scss" scoped>
    .upload-list-components{
        display: flex;
        flex-wrap: wrap;
        .show-upload{
            background: #ff9;
            width: .8rem;
            height: .8rem;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            border: 1px dashed #d9d9d9;
            transition: all 0.3s;
            margin-right: .2rem;
            .i-font{
                font-size: .22rem;
                color: #999;
            }
        }
        .show-upload:hover{
            border-color: #1890ff;
        }
        .image-show{
            img{
                width: .8rem;
                height: .8rem;
                object-fit: cover;
                margin-right: .2rem;
            }
        }
    }
</style>
